import React, { useState, useRef } from 'react';
import { 
  Input, 
  Button, 
  Breadcrumb, 
  Upload, 
  Modal, 
  Form, 
  Space, 
  Tooltip 
} from 'antd';
import { 
  SearchOutlined, 
  UploadOutlined, 
  DeleteOutlined, 
  FolderAddOutlined, 
  HomeOutlined 
} from '@ant-design/icons';
import { FileToolbarProps } from '../types';
import styles from '../FileMgr.module.css';

const { Search } = Input;

const FileToolbar: React.FC<FileToolbarProps> = ({
  onSearch,
  onUpload,
  onDelete,
  onCreateFolder,
  currentPath,
  selectedFiles
}) => {
  const [createFolderModalVisible, setCreateFolderModalVisible] = useState<boolean>(false);
  const [newFolderName, setNewFolderName] = useState<string>('');
  const uploadRef = useRef<any>(null);
  
  const pathArray = currentPath.split('/').filter(Boolean);
  
  const handleSearch = (value: string) => {
    onSearch(value);
  };
  
  const handleUpload = (option: any) => {
    const { file, onSuccess } = option;
    onUpload([file], currentPath);
    // 模拟上传成功
    setTimeout(() => {
      onSuccess("ok");
    }, 100);
  };
  
  const triggerUpload = () => {
    if (uploadRef.current) {
      uploadRef.current.upload.uploader.onClick();
    }
  };
  
  const handleCreateFolderOk = () => {
    if (newFolderName.trim()) {
      onCreateFolder(newFolderName.trim(), currentPath);
      setNewFolderName('');
      setCreateFolderModalVisible(false);
    }
  };
  
  const buildBreadcrumbItems = () => {
    const items = [
      {
        title: <Tooltip title="根目录"><HomeOutlined /></Tooltip>,
        path: '/',
      }
    ];
    
    let currentBuildPath = '';
    
    pathArray.forEach(folder => {
      currentBuildPath += `/${folder}`;
      items.push({
        title: <span>{folder}</span>,
        path: currentBuildPath,
      });
    });
    
    return items;
  };
  
  const breadcrumbItems = buildBreadcrumbItems();
  
  return (
    <div>
      <div className={styles.fileBreadcrumb}>
        <Breadcrumb 
          items={breadcrumbItems.map((item, index) => ({
            title: <span>{item.title}</span>,
            onClick: () => {}
          }))}
          separator="/"
        />
      </div>
      
      <div className={styles.fileToolbar}>
        <div className={styles.toolbarLeft}>
          <Search
            placeholder="搜索文件"
            allowClear
            enterButton={<SearchOutlined />}
            onSearch={handleSearch}
            style={{ width: 250 }}
          />
        </div>
        
        <div className={styles.toolbarRight}>
          <Upload
            customRequest={handleUpload}
            showUploadList={false}
            ref={uploadRef}
            fileList={[]}
          >
            <Button 
              type="primary" 
              icon={<UploadOutlined />} 
              onClick={triggerUpload}
              className={styles.uploadButton}
            >
              上传文件
            </Button>
          </Upload>
          
          <Button 
            icon={<FolderAddOutlined />} 
            onClick={() => setCreateFolderModalVisible(true)}
          >
            新建文件夹
          </Button>
          
          <Button
            danger
            icon={<DeleteOutlined />}
            onClick={onDelete}
            disabled={selectedFiles.length === 0}
          >
            删除
          </Button>
        </div>
      </div>
      
      <Modal
        title="新建文件夹"
        open={createFolderModalVisible}
        onOk={handleCreateFolderOk}
        onCancel={() => setCreateFolderModalVisible(false)}
      >
        <Form layout="vertical">
          <Form.Item 
            label="文件夹名称" 
            required
            rules={[{ required: true, message: '请输入文件夹名称' }]}
          >
            <Input
              value={newFolderName}
              onChange={(e) => setNewFolderName(e.target.value)}
              placeholder="请输入文件夹名称"
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default FileToolbar; 